<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>【案例】Tab栏切换</title>
    <style>

    </style>
</head>
<body>
   <div class="tab">
       <div class="tab_first">
           <ul>
               <li class="current">商品介绍</li>
               <li>规格与包装</li>
               <li>售后保障</li>
               <li>商品评价</li>
               <li>手机社区</li>
           </ul>
       </div>
       <div class="tab_con">
           <div class="item" style="display: block">商品介绍模块内容</div>
           <div class="item">规格与包装模块内容</div>
           <div class="item">售后保障模块内容</div>
           <div class="item">商品评价（5000）模块内容</div>
           <div class="item">手机社区模块内容</div>
       </div>
   </div>
<script>
    //获取标签部分的所有元素对象
    var tab_list = document.querySelector('.tab_list');
    var lis = tab_list.querySelectorAll('li');
    //获取内容部分的所有内容对象
    var items = document.querySelectorAll('.item');
    for(var i = 0; i < lis.length; i++){
        lis[i].setAttribute('indext',i);
        lis[i].onclick = function (){
            for(var i = 0;i < lis.length; i++){
                lis[i].className = '';
            }
            this.className = 'current';
            //下面的显示内容模块
            var index = this.getAttribute('index');
            for(var i = 0;i < items.length; i++){
                items[i].style.display = 'none';
            }
            items[index].style.display = 'block';
        };
    }
</script>
</body>
</html>